<template>
  <div>
    <el-timeline>
      <el-timeline-item
          v-for="(activity, index) in activities"
          :key="index"
          :color="activity.color"
          placement="top"
          :timestamp="activity.timestamp">
        <el-card>
          <div>
            <h2 style="display: inline; margin-right: 20px;">{{ activity.title }}</h2>
            <span style="color:#909399; font-size: 14px; font-weight: normal; white-space: nowrap;">
              {{ activity.type }}
            </span>
            <el-rate v-model="activity.level" disabled style="float: right;"></el-rate>
          </div>
          <p>{{ activity.content }}</p>
        </el-card>
      </el-timeline-item>
    </el-timeline>
  </div>
</template>

<script>
export default {
  name: 'notice',
  data(){
    return {
      activities:[
        {
          color: '#F56C6C',
          timestamp: '2025-04-12 20:46',
          title: '标题',
          type: '类型',
          level: 2,
          content: '支持使用图标，如果某种颜色在你的界面上Use the icon if it fits the theme of your interface.',
        },
        {
          color: 'red',
          timestamp: '2025-04-12 20:46',
          title: '标题',
          type: '类型',
          level: 2,
          content: '支持使用图标，如果某种颜色在你的界面上Use the icon if it fits the theme of your interface.',
        },
      ],
    }
  },
  mounted() {
    this.getData()
  },
  methods:{
    //获取数据
    getData(){
      this.$request({
        url: '/notice/notice/list',
        method: 'get',
        params: {
          'page': 1,
          'limit': 10000,
          'key': ''
        }
      }).then(res=>{
        if (res && res.code === 200) {
          this.activities = res.page.list.map(item=>({
            timestamp: item.publishDate,
            ...item
          }))
        }
      })
    }
  }
}
</script>

<style scoped>

</style>
